@page "/user/register"
@inherits AliasVault.Client.Auth.Pages.Base.LoginBase
@attribute [AllowAnonymous]
@layout Auth.Layout.MainLayout
@using AliasVault.Client.Auth.Models
@using AliasVault.Client.Auth.Components
@using Microsoft.Extensions.Localization

<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
    @Localizer["PageTitle"]
</h2>

<FullScreenLoadingIndicator @ref="_loadingIndicator" />
<ServerValidationErrors @ref="_serverValidationErrors" />

<EditForm Model="_registerModel" OnValidSubmit="HandleRegister" class="mt-8 space-y-6">
    <DataAnnotationsValidator/>
    <div>
        <label asp-for="Input.Email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">@Localizer["UsernameOrEmailLabel"]</label>
        <InputTextField id="email" @bind-Value="_registerModel.Username" type="text" placeholder="@Localizer["UsernamePlaceholder"]" />
        <ValidationMessage For="() => _registerModel.Username"/>
    </div>
    <div>
        <label asp-for="Input.Password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">@Localizer["PasswordLabel"]</label>
        <InputTextField id="password" @bind-Value="_registerModel.Password" type="password" placeholder="@Localizer["PasswordPlaceholder"]" />
        <ValidationMessage For="() => _registerModel.Password"/>
    </div>
    <div>
        <label asp-for="Input.Password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">@Localizer["ConfirmPasswordLabel"]</label>
        <InputTextField id="password2" @bind-Value="_registerModel.PasswordConfirm" type="password" placeholder="@Localizer["PasswordPlaceholder"]" />
        <ValidationMessage For="() => _registerModel.PasswordConfirm"/>
    </div>

    <div class="flex items-start">
        <div class="flex items-center h-5">
            <InputCheckbox id="terms" @bind-Value="_registerModel.AcceptTerms" class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600" />
        </div>
        <div class="ml-3 text-sm">
            <label for="terms" class="font-medium text-gray-900 dark:text-white">@Localizer["AcceptTermsLabel"] <a href="https://www.aliasvault.net/terms-and-conditions" target="_blank" class="text-primary-700 hover:underline dark:text-primary-500">@Localizer["TermsAndConditionsLink"]</a></label>
            <ValidationMessage For="() => _registerModel.AcceptTerms"/>
        </div>
    </div>

    <button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">@Localizer["CreateAccountButton"]</button>
    <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
        @Localizer["AlreadyRegisteredText"] <a href="/user/login" class="text-primary-700 hover:underline dark:text-primary-500">@Localizer["LoginHereLink"]</a>
    </div>
</EditForm>

@code {
    private readonly RegisterFormModel _registerModel = new();
    private FullScreenLoadingIndicator _loadingIndicator = new();
    private ServerValidationErrors _serverValidationErrors = new();

    private IStringLocalizer Localizer => LocalizerFactory.Create("Components.Auth.Register", "AliasVault.Client");

    private async Task HandleRegister()
    {
        _loadingIndicator.Show(Localizer["CreatingAccountMessage"]);
        _serverValidationErrors.Clear();

        var (success, errorMessage) = await UserRegistrationService.RegisterUserAsync(_registerModel.Username, _registerModel.Password);

        if (success)
        {
            NavigationManager.NavigateTo("/");
        }
        else
        {
            _serverValidationErrors.AddError(errorMessage ?? Localizer["RegistrationErrorMessage"]);
            StateHasChanged();
        }

        _loadingIndicator.Hide();
    }
}
